<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="userManager">用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider />
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="学号">
            <el-input placeholder="根据学号查询" clearable />
        </el-form-item>
        <el-form-item label="姓名">
            <el-input placeholder="根据姓名查询" clearable />
        </el-form-item>
        <el-form-item label="出生年月">
            <el-date-picker type="date" placeholder="请选择你的出生日期" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="search">查询</el-button>
        </el-form-item>
    </el-form>
    <el-divider />
    <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column type="selection" />
        <el-table-column align="center" label="学号" prop="sid" width="100px" />
        <el-table-column align="center" label="姓名" prop="sname" width="70px" />
        <el-table-column align="center" label="兴趣爱好" width="300px">
            <template #default="scope">
                <el-tag type="danger" size="large" v-for="(item, index) in scope.row.hobby.split(',')">{{ item }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="center" label="地址" prop="address" />
        <el-table-column align="center" label="操作" width="200px">
            <template #default="scope">
                <el-button type="success" title="编辑" icon="edit" size="small"
                    @click="handleEdit(scope.$index, scope.row)">
                    编辑
                </el-button>
                <el-button icon="delete" title="删除" size="small" type="danger"
                    @click="handleDelete(scope.$index, scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-divider />
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[100, 200, 300, 400]"
        :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import request from '../../axios/request';
import { ElMessage } from 'element-plus';
var tableData = ref()
onMounted(() => {//挂载之后执行的方法
    request.get("user/findAll")//http://localhost:8088/user/findAll
        .then((result) => {
           // console.log("test="+result.data)
        //    ElMessage.success(JSON.stringify(result.data));
          tableData.value=result.data;
        }).catch((error) => {
            ElMessage.warning("请求数据失败！");
        });
});

</script>

<style scoped>
.el-tag {
    margin-left: 5px;
}
</style>